<template>
  <div class="app-content-wrap" :style="'minHeight:' + gHeight + 'px;'">
    <div class="g-content-title">人员详细信息</div>

    <div class="app-detail">
      <el-row :gutter="20">
        <el-col :span="12">
          <el-col :span="4">
            <div class="grid-content app-detail-title">用户名</div>
          </el-col>
          <el-col :span="20">
            <div class="grid-content app-detail-cont">{{ userObj.userId}}</div>
          </el-col>
        </el-col>
        <el-col :span="12">
          <el-col :span="4">
            <div class="grid-content app-detail-title">姓名</div>
          </el-col>
          <el-col :span="20">
            <div class="grid-content app-detail-cont">{{ userObj.userName}}</div>
          </el-col>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="12">
          <el-col :span="4">
            <div class="grid-content app-detail-title">角色</div>
          </el-col>
          <el-col :span="20">
            <div class="grid-content app-detail-cont">{{ userObj.roleName}}</div>
          </el-col>
        </el-col>

        <el-col :span="12">
          <el-col :span="4">
            <div class="grid-content app-detail-title">手机号码</div>
          </el-col>
          <el-col :span="20">
            <div class="grid-content app-detail-cont">{{userObj.mobile}}</div>
          </el-col>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="12">
          <el-col :span="4">
            <div class="grid-content app-detail-title">邮箱</div>
          </el-col>
          <el-col :span="20">
            <div class="grid-content app-detail-cont">{{userObj. userEmail }}</div>
          </el-col>
        </el-col>

        <el-col :span="12">
          <el-col :span="4">
            <div class="grid-content app-detail-title">电话</div>
          </el-col>
          <el-col :span="20">
            <div class="grid-content app-detail-cont">{{userObj.userPhone}}</div>
          </el-col>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="12">
          <el-col :span="4">
            <div class="grid-content app-detail-title">所属部门</div>
          </el-col>
          <el-col :span="20">
            <div class="grid-content app-detail-cont">{{deptName }}</div>
          </el-col>
        </el-col>
        <el-col :span="12">
          <el-col :span="4">
            <div class="grid-content app-detail-title">工号</div>
          </el-col>
          <el-col :span="20">
            <div class="grid-content app-detail-cont">{{userObj.jobNbr}}</div>
          </el-col>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="12">
          <el-col :span="4">
            <div class="grid-content app-detail-title">用户状态</div>
          </el-col>
          <el-col :span="20">
            <div class="grid-content app-detail-cont">{{userState}}</div>
          </el-col>
        </el-col>
      </el-row>

    </div>

  </div>
</template>

<script>
export default {
  name: 'userDetail',
  data () {
    return {
      gHeight: this.$store.state.gHeight,
      userId: this.$route.params.userId,
      userObj: '',
      deptName: '',
      userState: ''
    }
  },
  mounted () {
    this.getUserList()
  },
  methods: {
    getUserList () {
      let url = this.$base.getUrl('selectUserInfoByPrimaryKey')
      this.$store.dispatch('getForm', { url: url, data: { userId: this.userId } }).then((res) => {
        this.userState = this.$base.getNameByConst('select', 'userState', res.userState)
        if (res) {
          this.userObj = res
          let dName1 = res.deptName1 ? res.deptName1 : ''
          let dName2 = res.deptName2 ? '-' + res.deptName2 : ''
          let dName3 = res.deptName3 ? '-' + res.deptName3 : ''
          this.deptName = dName1 + dName2 + dName3
        }
      })
    }
  },
  beforeRouteLeave (to, from, next) {
    if (to.name !== 'userList') {
      this.$store.commit('keepOut')
    }
    next()
  }
}
</script>

<style scoped>
  .detail-wrap {
    padding: 10px;
    margin-top: 20px;
    margin-left: 20px;
    background-color: #FFF;
    border: 2px solid #E9E9E9;
  }
  .txt-color{
    color: #9FACC3;
  }
</style>
